<template>
  <div class="news_wrapper">
    <div class="left_info">
      <div class="left_time">
        <span class="news_time">{{ time }}</span>
        <i class="iconfont newIcon">&rarr;</i>
      </div>
      <a :href="`/article-${articleId}`" class="right_content">
        <h3 class="newTitle">
          <span target="_blank" class="p_title newTitleLink">{{ title }}</span>
        </h3>
        <article class="p_summary newMs">{{ desc }}</article>
      </a>
    </div>
    <div class="right_img">
      <a :href="`/article-${articleId}`" target="_blank" class="newPicLink">
        <img :src="imgUrl" class="newPic">
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsInfoWidget',
  props: {
    time: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      required: true
    },
    imgurl: {
      type: String,
      required: true
    },
    articleId: {
      type: Number,
      required: true
    }
  },
  computed: {
    imgUrl () {
      return require('../assets/attachment/' + this.imgurl)
    }
  }
}
</script>

<style lang="less" scoped>
.news_wrapper {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
  .left_info {
    display: flex;
    width: calc(100% - 165px);
    .left_time {
      width: 150px;
      position: relative;
      .news_time {
        display: block;
        color: #999;
        font-size: 1.5rem;
        font-weight: 400;
        margin: 0 0 30px;
        transition: all .5s ease;
      }
      .newIcon {
        padding: 6px 11px;
        border: 1px solid transparent;
        transition: all .5s ease;
        color: #ccc;
      }
    }
    .right_content {
      padding: 0 30px 0 60px;
      position: relative;
      width: calc(100% - 100px);
      transition: all .5s ease;
      .newTitle {
        margin-bottom: 10px;
      }
      .newTitleLink {
        display: block;
        width: 100%;
        font-size: 1rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
        transition: all .5s ease;
      }
      .p_summary {
        white-space: normal;
      }
      .newMs {
        line-height: 24px;
        height: 48px;
        font-size: .875rem;
        overflow: hidden;
        color: #999;
        transition: .6s;
      }
    }
    .right_content::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1rem;
      display: block;
      width: 40px;
      height: 1px;
      background: #aaa;
      transition: all .5s ease;
    }
  }
  .right_img {
    width: 165px;
    height: 110px;
    .newPicLink {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      .newPic {
        width: 100%;
        height: 100%;
        transform: scale(1);
        transition: all .5s ease;
      }
    }
  }
}

.news_wrapper:hover {
  .left_info {
    .left_time {
      .news_time {
        color: #e60012;
      }
      .newIcon {
        border-color: #e60012;
        margin-top: 10px;
        background: #e60012;
        color: #fff;
      }
    }
    .right_content {
      padding-left: 80px;
      .newTitle {
        .newTitleLink {
          color: #e60012;
        }
      }
    }
    .right_content::before {
      width: 60px;
    }
  }
  .right_img {
    .newPicLink {
      .newPic {
        transform: scale(1.1);
      }
    }
  }
}
</style>
